<template>
  <div class="content">
    <div class="center">
      <div class="herdertop">
        <img src="../../assets/top.png" alt="" class="topImg" />
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>服务商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>未开通区域商品配置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="hander">未开通区域商品配置</div>
      <div class="orderList" v-loading="len !== '' ? false : true" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-custom-class="loading_color" style="width: 100%;">
        <div class="entirety">
          <div class="fist">
            <span>商品分组-微盟服务商品</span>
            <el-button style="background-color:#fd804c;color: #fff;" size="mini" @click="synchronous">同步分组</el-button>
          </div>
          <div v-for="(item, index) in list" :key="index">
            <el-collapse>
              <el-collapse-item>
                <template>
                  <div class="collapse-title" slot="title">
                    <div class="top">
                      <div class="fistcheck1">
                        <input type="checkbox" v-model="item.isAllSelected" @click="chooseAll(item)" />
                        <span>全选</span>
                      </div>
                      <span style="margin-right: 70px;">{{ item.title }}</span>
                      <div style="margin-right: 20px;">
                        <span>归属城市</span>
                        <el-select v-model="item.cityCode" placeholder="请选择" size="mini" @change="citys(item)">
                          <el-option v-for="item in cityOptions" :key="item.name" :label="item.name" :value="item.citycode">
                          </el-option>
                        </el-select>
                      </div>
                      <div style="margin-right: 20px;">
                        <span>默认分组：</span>
                        <el-radio v-model="item.isDefault" :disabled="
                            item.cityCode === null
                              ? disabled === false
                              : disabled === true
                          " :label="1" @change="addfist(item)">是</el-radio>
                        <el-radio v-model="item.isDefault" :disabled="
                            item.cityCode === null
                              ? disabled === false
                              : disabled === true
                          " :label="0" @change="addtwo(item)">否</el-radio>
                      </div>
                      <el-button type="danger" size="mini" style="margin-left: 65px;" @click.stop="del(item)">删除分组</el-button>
                    </div>
                  </div>
                </template>
                <div class="bottom" v-for="(item1, index) in item.goodsLists" :key="index">
                  <input type="checkbox" class="fistcheck" :id="item1.goodsId" @change="singleChecked(item, item1)" :value="item1.goodsId" v-model="item1.isShow" />
                  <el-image :src="item1.defaultImageUrl"></el-image>
                  <div class="one">{{ item1.title }}</div>
                  <div class="last1">{{ item1.minPrice }}</div>
                  <div class="last" v-if="item1.isPutAway === 0">上架中</div>
                  <div class="last" v-show="item1.isPutAway === 1">下架中</div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <div class="left"></div>
        <div class="right">
          <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40]" :page-size="pageSize" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      title: "",
      len: "",
      classifyId: "",
      activeNames: ["1"],
      cityOptions: [],
      city: "",
      goodsId: "",
      isShow: "",
      radio: "",
      goodid: "",
      isShow: "",
      loading: "",
      disabled: false,
      // 分页数据
      currentPage: 1, //当前页
      pageSize: 0, // 每页条数
      total: 0 // 数据总量
      // checked: false, // 正在进行中的数据是否被选中
      // checkedCode: [] // 用于保存被选中的数据
    };
  },
  mounted () {
    this.sava();
    this.cityList();
  },
  methods: {
    addfist (item) {
      //console.log(item.classifyId);
      const data = {
        classifyId: item.classifyId
      };
      this.$http({
        url: "/goodsadmin/goods/updateClassifyDefaultStatus",
        method: "POST",
        data
      }).then(res => {
        this.sava();
        //console.log(res, "默认分组");
      });
    },
    addtwo (item) {
      const data = {
        classifyId: item.classifyId
      };
      this.$http({
        url: "/goodsadmin/goods/updateClassifyDefaultStatus",
        method: "POST",
        data
      }).then(res => {
        this.sava();
        //console.log(res, "默认分组");
      });
    },
    // 用户单选
    singleChecked (item, item1) {
      const a = item.goodsLists.filter(item => item.isShow === false);
      if (a.length === 0) {
        item.isAllSelected = true;
        this.$http({
          url: "/goodsadmin/goods/updateShowStatus",
          method: "POST",
          data: {
            goodsShowStatusList: [
              {
                goodsId: item1.goodsId,
                isShow: true
              }
            ]
          }
        }).then(res => {
          //console.log(res, "修改商品显示状态");
        });
      } else {
        item.isAllSelected = false;
        this.$http({
          url: "/goodsadmin/goods/updateShowStatus",
          method: "POST",
          data: {
            goodsShowStatusList: [
              {
                goodsId: item1.goodsId,
                isShow: false
              }
            ]
          }
        }).then(res => {
          //console.log(res, "修改商品显示状态");
        });
      }
    },
    // 用户全选
    chooseAll (item) {
      //console.log(item.isAllSelected)
      if (item.isAllSelected === false) {
        item.goodsLists.forEach(e => {
          e.isShow = true;
        });
        const goodsShowStatusList = item.goodsLists.map(item => {
          return {
            goodsId: item.goodsId,
            isShow: true
          };
        });
        this.$http({
          url: "/goodsadmin/goods/updateShowStatus",
          method: "POST",
          data: {
            goodsShowStatusList
          }
        }).then(res => {
          this.checkedCode = [];
          //console.log(res, "修改商品显示状态");
        });
      } else {
        item.goodsLists.forEach(e => {
          e.isShow = false;
        });
        const goodsShowStatusList = item.goodsLists.map(item => {
          return {
            goodsId: item.goodsId,
            isShow: false
          };
        });
        this.$http({
          url: "/goodsadmin/goods/updateShowStatus",
          method: "POST",
          data: {
            goodsShowStatusList
          }
        }).then(res => {
          this.checkedCode = [];
          //console.log(res, "修改商品显示状态");
        });
      }
    },
    //列表
    sava () {
      this.$http({
        url: "/goodsadmin/goods/simpleWmGoodsClassify",
        method: "POST",
        data: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        //console.log(res.data);
        this.len = res.data.list.length;
        this.list = res.data.list;
        this.list.forEach(e => {
          this.checked = e.cityName;
        });
        //分页
        this.total = res.data.total;
      });
    },
    //默认分组
    default () {
      const data = {
        classifyId: this.classifyId,
        isDefault: this.radio
      };
      this.$http({
        url: "/goodsadmin/goods/updateClassifyDefaultStatus",
        method: "POST",
        data
      }).then(res => {
        //console.log(res, "默认分组");
      });
    },
    //同步
    synchronous () {
      this.$http({
        url: "/goodsadmin/goods/fetchGoodsByClassifyParentId",
        method: "get"
      }).then(res => {
        this.sava();
        //console.log(res, "同步");
      });
    },
    //删除
    del (item) {
      this.$http({
        url: "/goodsadmin/goods/deleteGoodsClassify",
        method: "get",
        params: {
          classifyId: item.classifyId
        }
      }).then(res => {
        // //console.log(res, '删除')
        this.sava();
      });
    },
    //城市
    cityList () {
      var appData = require("../../json/cityNameAndCode.json");
      this.cityOptions = appData;
      // //console.log(this.cityOptions)
    },
    citys (item) {
      this.$http({
        url: "/goodsadmin/goods/updateGoodsClassifyCityCode",
        method: "POST",
        data: {
          cityCode: item.cityCode,
          classifyId: item.classifyId
        }
      }).then(res => {
        //console.log(res)
      });
    },
    checks (item1) {
      //console.log(item1.goodsId);
      const data = {
        goodsShowStatusList: [
          {
            goodsId: item1.goodsId,
            isShow: item1.isShow
          }
        ]
      };
      this.$http({
        url: "/goodsadmin/goods/updateShowStatus",
        method: "POST",
        data
      }).then(res => {
        //console.log(res);
      });
    },
    // 分页  当前页变化
    handleSizeChange (val) {
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      //console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  // padding: 0 20px;
  box-sizing: border-box;

  .topImg {
    margin-right: 20px;
  }
}
/deep/ .el-loading-spinner i {
  color: #fc9e76;
}
/deep/ .el-loading-spinner .el-loading-text {
  color: #fc9e76;
  margin: 3px 0;
  font-size: 14px;
}
.collapse-title {
  flex: 1 0 90%;
  order: 1;
}
.el-collapse {
  margin-top: 2px;
  color: #303133;
  border: 0px;
}
.el-collapse-item__header {
  flex: 1 0 auto;
  order: -1;
}
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}

.orderList {
  background-color: #ebeef1;
  padding: 10px 10px 10px 10px;
  display: block;
  border-radius: 20px;

  .fist {
    background-color: #fff;
    height: 48px;
    padding-left: 25px;
    padding-right: 106px;
    line-height: 48px;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    .el-button--mini {
      height: 30px;
      margin-top: 10px;
    }
  }
}

.el-divider--horizontal {
  margin: 0;
}
/deep/ .el-collapse-item:last-child {
  margin-bottom: 0;
}
/deep/ .el-collapse-item__wrap {
  border-bottom: 0;
}
.top {
  display: flex;
  width: 100%;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;

  .fistcheck1 {
    display: flex;
    align-items: center;
    margin-left: 50px;
    margin-right: 70px;
  }

  /deep/ .el-select {
    width: 60%;
  }
  /deep/ .el-radio {
    margin-right: 5px;
  }
}

.bottom {
  display: flex;
  align-items: center;
  // justify-content: space-around;
  padding-top: 5px;
  padding-bottom: 5px;
  border-top-color: #ebeef1;
  border-top-style: solid;
  border-top-width: 3px;

  .fistcheck {
    margin-left: 95px;
    margin-right: 102px;
  }

  .el-image {
    width: 45px;
    height: 45px;
    margin-right: 70px;
    text-align: center;
  }

  .one {
    width: 290px;
  }

  .last1 {
    width: 40px;
    margin-left: 60px;
  }

  .last {
    margin-left: 140px;
    margin-right: 0;
  }
}

.pagination {
  height: 50px;
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

/deep/ .el-collapse-item__content {
  padding-bottom: 0;
}

/deep/ .el-collapse-item__arrow {
  margin-left: 24px;
}
</style>
